<!DOCTYPE html>
<html>
<head>
<link rel='match' href='transform_skew_ref.html'>
<style>
div {
    height: 150px;
    width: 150px;
}

div>div {
    background-color: blue;
}

.container {
    border: 1px solid black;
    margin: 20px;
}

.transformed1 {
    transform: skewX(0.25rad);
}

.transformed2 {
    transform: skewY(0.5rad);
}

.transformed3 {
    transform: skew(0.25rad, 0.5rad);
}
</style>
</head>
<body>
<p>
<div class="container">
    <div class="transformed1"></div>
</div>
</p>

<p>
<div class="container">
    <div class="transformed2"></div>
</div>
</p>

<p>
<div class="container">
    <div class="transformed3"></div>
</div>
</p>
</body>
</html>
